Download Project  (Full Project)

Step-1

In this part i will show how to configure Google map in ASP.NET MVC. Now  Open visual studio then create a new asp.net web application and select MVC. If you want you can change your project name and solution name.  Now visual studio creates a default project for you. Now go to your Browser and type https://developers.google.com/maps/documentation link. Now click web and click JavaScript api now click get started. You can see Google map and also see the markup code. You should just copy and pest the code in your home->index view. Also create/ generate your API key.  Given bellow the index views code:

@{
    ViewBag.Title = "Home Page";
}
<style>
    #map {
        height: 500px;
    }
</style>
<br /><br />
<div>
    <select class="form-control" id="selectedValue" onchange="GoLocation(this.value)">

        <option>--Select--</option>
        @foreach (var item in ViewBag.ListOfDropdown)
        {
            <option value="@item.Id">@item.Address</option>
        }

    </select>
</div>
<br />
<div id="map"></div>

<script>
    var map;
    function initMap(zoomeLevel,latDb,longDb) {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: latDb!=null?latDb:23.778074, lng:longDb!=null?longDb:90.397514 },
            zoom: zoomeLevel!=null?zoomeLevel:6
        });

       

    }
    function GoLocation(locationId) {
        $.get("/Home/GetAllLocationById?id=" + locationId, function (data, status) {
            var iconName = data.Rating == 1 ? "../Icons/one.png" : data.Rating == 2 ? "../Icons/two.png" : "../Icons/three.png";
            initMap(data.Zoom, data.Lat, data.Long);
            marker = new google.maps.Marker({
                position: { lat: data.Lat, lng: data.Long },
                map: map,
                icon: iconName
            });
            contentString = '<div id="content">' +
                                '<div id="siteNotice">' +
                                '</div>' +
                                '<h1 id="firstHeading" class="firstHeading">' + data.Address + '</h1>' +
                                '<div id="bodyContent">' +
                                '<p><b>' + data.Address + '</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                                'sandstone rock formation in the southern part of the ' +
                                'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
                                'south west of the nearest large town, Alice Springs; 450&#160;km ';
            infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                return function () {
                    infowindow.open(map, marker);
                }
            })(marker, i));
            google.maps.event.addListener(marker, 'mouseout', (function (marker, i) {
                return function () {
                    infowindow.close();
                }
            })(marker, i));
        })
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJOZd-P3bAJXBAYtfryQT_GTv61uRehMs&callback=initMap" async defer></script>

Step-2

 This Google Map is full JavaScript code depends. No need to write extra code into server site.  Just c# method return a view and this view represent the Google map. Given bellow the controller code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace GoogleMap.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Step-3

 Now build and run the project.